<template>
  <div class="capacity">
    <span class="title">产线产能设置</span>
    <div class="lists">
      <div class="list" v-for="(item,index) in productLineList">
        <div class="list_title">{{item.code}}</div>
        <div class="list_divs">
          <div class="list_div" @click="updatePro(item,2)">
            <div class="ld_left">人员配备</div>
            <div class="ld_right">
              <span class="ldr_1">{{item.member_amount}}</span>
              <span class="ldr_2">人</span>
            </div>
          </div>
          <div class="list_div" v-for="(ite,ind) in item.hourList" @click="updatePro(ite,3)">
            <div class="ld_left">{{ite.hour}}小时产量</div>
            <div class="ld_right">
              <span class="ldr_1">{{ite.output}}</span>
              <span class="ldr_2">pcs</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <upstateProduct v-if="showUpstatePro" :updateProDate="updateProDate" @getBack="getBack" :upType="upType"></upstateProduct>
  </div>
</template>

<script>
  import upstateProduct from '../../../dialog/upstateProduct'
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: "capacity",
    data() {
      return {
        productLineList: [],
        canOperation: false, //判断身份是否可以操作
        updateProDate: {}, //修改的参数
        upType: 2, //修改的类型，2：人员配置，3：产线产能
      }
    },
    computed:{
      ...mapGetters([
        'showUpstatePro'
      ])
    },
    components:{
      upstateProduct,
    },
    created() {
      let self = this
      self.getProductLine()
      let authoritiesList = JSON.parse(localStorage.getItem('authoritiesList'))
      for (let i = 0; i < authoritiesList.length; i++){
        if (authoritiesList[i] == 'ROLE_CHECK'){
          self.canOperation = true
        }
      }
    },
    mounted() {
    },
    methods: {
      ...mapActions(['upstate']),
      //获取产线产能
      getProductLine(){
        let self = this
        self.$http.get(self.conURL + 'pm/api/product_line').then(res => {
          self.productLineList = res.data
        })
      },
      //修改人员配置/产线产能
      updatePro(item,index){
        let self = this
        if (self.canOperation){
          self.upType = index
          self.upstate({key:'showUpstatePro',val:true})
          self.updateProDate = item;
        }
      },
      //组件返回值，重置列表刷新
      getBack(par){
        let self = this
        self.getProductLine()
      }
    }
  }
</script>

<style lang="less">
  .capacity{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 28px;
    padding-top: 0;
    box-sizing: border-box;
    .title{
      font-size: 20px;
      color: #333333;
    }
    .lists{
      display: flex;
      flex-direction: column;
      .list{
        border-bottom: 1px dashed #e5e5e5;
        .list_title{
          font-size: 18px;
          color: #222222;
          margin-bottom: 20px;
        }
        .list_divs{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .list_div{
            width: 25%;
            border: 1px solid #e5e5e5;
            border-radius: 2px;
            font-size: 14px;
            padding: 18px;
            background: #fff;
            margin-top: 12px;
            margin-right: 12px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            line-height: 24px;
            cursor: pointer;
            .ld_right{
              display: flex;
              flex-direction: row;
              letter-spacing: 2px;
              .ldr_1{
                color: #3384dd;
                font-size: 24px;
              }
            }
          }
          .list_div:nth-child(1),.list_div:nth-child(2),.list_div:nth-child(3){
            margin-top: 0;
          }
        }
      }
      .list:last-child{
        border-bottom: none;
      }
    }
  }
</style>
